<template>
  <div class="product-box">
    <div class="detail-box">
      <div class="detail_left">
        <el-image v-if="defaultImg" id="winpic" :src="defaultImg" class="pic" :preview-src-list="viewimgList" />
        <div id="detail_playPicture" class="play-picture" style="display: block;">
          <a id="play_picture_leftbtn" class="left-button" style="opacity: 1;">
            <div class="triangle-wrap">
              <div id="triangle-left" @click="moveImgLeft" />
              <div id="triangle-left1" @click="moveImgLeft" />
            </div>
          </a>
          <a id="play_picture_rightbtn" class="right-button" style="opacity: 1;">
            <div class="triangle-wrap">
              <div id="triangle-right" @click="moveImgRight" />
              <div id="triangle-right1" @click="moveImgRight" />
            </div>
          </a>
          <div id="detail_playPicture_list" class="list">
            <ul :style="'margin-left:'+marginLeft+'px'">
              <li v-for="(item,index) in productData.imgList" :key="index" :class="defaultImg===item.displayUrl?'checked':''" @mouseover="selImg(item.displayUrl)">
                <a href="javascript:;">
                  <img :src="item.displayUrl" :alt="productData.imageName">
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div id="detail_right" class="con_right detail_right">
        <div class="right-box">
          <div class="product-name">{{ productData.itemName }}</div>
          <div class="num-all">
            <span>已售 {{ productData.saleNum }}</span>
            <span>{{ productData.storeName }}</span>
          </div>
          <div class="price-box">
            ￥ <span>{{ productData.itemPriceDouble }}</span>
          </div>
          <div class="adress-box">
            <div>配送</div>
            <div class="adress-margin">配送至：</div><div class="adress">陕西省西安市雁塔区文艺路街道</div>
          </div>
          <div class="transportation-box">
            <div>运输费</div>
            <div class="transportation-type">免运</div>
          </div>

          <div id="addcountbox" class="add-count-wrap">
            <span id="reduce_buy_number" class="reduce reduce_buy_number" @click="reduceNum">
              <i class="buy-count-plus">-</i>
            </span>
            <input id="buy_number" v-model="quantity" type="text" class="txt" value="1" @input="numIptFn">
            <span id="add_buy_number" class="add" @click="addNum">
              <i class="buy-count-minus">+</i>
            </span>
          </div>

          <div class="business-staff-container">
            <div class="business-detail">
              <div id="div_button_group">
                <div id="jrgwc" class="button-add btn" style="" @click="addCartFn">加入购物车</div>
                <div id="ljgm" class="button-pay btn" style="" title="立即购买" @click="goPayFn">立即购买</div>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="detail-html">
      <div class="container_info">
        <div class="info-title">
          <div class="dec-tab" :class="isShowDec? 'bottmcolor':'' " @click="detailTabBtnFn(1)">商品介绍</div>
          <div class="specs-tab" :class="isShowSpecs? 'bottmcolor':'' " @click="detailTabBtnFn(2)">规格预包装</div>
        </div>
        <div v-show="isShowDec" class="dec-html">
          <div v-html="productData.descInfo" />
        </div>
      </div>
      <!-- <div v-show="isShowSpecs" class="dec-html">
        <div v-for="(item,index) in productData.categoryGroupList" :key="index" class="dec-count">
          <div class="dec-title">
            {{ item.groupName }}
          </div>
          <div class="dec">
            <span v-for="(ite,idx) in item.attrValueDetailList" :key="idx" class="coutent">

              <span class="txt-color">{{ ite.attrName }} ：</span>
              <span>{{ ite.attrValue }}</span>

            </span>
          </div>

        </div>
      </div> -->
      <div v-show="isShowSpecs" class="specs-html">

        <div v-for="(item,index) in categoryGroupListLast" :key="index" class="table-item">
          <h3 v-if="item.attrValueDetailList.length >0"> {{ item.groupName }}</h3>
          <dl v-if="item.attrValueDetailList.length >0">
            <dl>
              <dl v-for="(ite,idx) in item.attrValueDetailList" :key="idx" class="clearfix" style="margin:0">
                <dt>{{ ite.attrName }} </dt><dd>{{ ite.attrValue }}</dd>
              </dl>
            </dl>
          </dl>
        </div>
      </div>

    </div>
  </div>

</template>
<script>

import _validate from '@/framework/commonJs/wptx_validate'
import { _productDetail, _addCatcartCreate, _addCatcartTotal } from '@/api/homePage'

export default {
  name: 'ProductDetalIndex',
  components: {

  },

  data() {
    return {
      productData: {
        productName: ''

      }, // 商品
      productId: '',
      defaultImg: '', // 默认大图
      marginLeft: 0,
      moreMarginLeft: 0,
      isShowSpecs: false, // 是否显示规格预包装
      isShowDec: true, // 是否显示商品介绍
      quantity: 1,
      viewimgList: [],
      categoryGroupListLast: []// 规格信息集合
    }
  },

  computed: {

  },
  watch: {

  },
  created() {
  },
  mounted() {
    // 获取参数请求接口渲染商品列表
    this.productId = this.$route.query.id
    console.log(this.$route.query.id)
    this.orderDetailsProduct()
  },
  methods: {
    // 商品详情
    async orderDetailsProduct() {
      const params = {
        storeItemId: this.productId
      }
      const { result } = await _productDetail(params)
      if (_validate.checkEmpty(result)) {
        _validate.openTip(this, '获取超时，请稍后重试', 'warning')
      } else {
        this.productData = result.data
        this.defaultImg = result.data.imgList[0].displayUrl
        this.productData.imgList.forEach(item => {
          this.viewimgList.push(item.displayUrl)
        })

        result.data.categoryGroupList.forEach(item => {
          if (item.attrValueDetailList.length > 0) {
            this.categoryGroupListLast.push(item)
          }
        })
        // 计算图片左右移动距离
        let num = Number(this.productData.imgList.length)
        const more = num % 5
        if (more !== 0) {
          num += (5 - more)
        }
        num -= 5
        this.moreMarginLeft = -(num / 5 * 482)
        this.getcartNumFn()
      }
    },
    moveImgLeft() { // 左移图片
      if (this.marginLeft < 0) {
        this.marginLeft += 482
      }
    },
    moveImgRight() { // 右移图片
      console.info(this.marginLeft)

      if (this.marginLeft > this.moreMarginLeft) {
        this.marginLeft += -482
      }
    },
    selImg(img) { // 切换图片
      this.defaultImg = img
    },
    // 图文介绍操作
    detailTabBtnFn(code) {
      if (code === 1) {
        this.isShowDec = true
        this.isShowSpecs = false
      } else {
        this.isShowDec = false
        this.isShowSpecs = true
      }
    },
    // 加入购物车
    async addCartFn() {
      const {
        itemId,
        storeId
      } = this.productData
      const params = {
        itemId,
        memberNickname: 17610391026,
        memberUserId: 145,
        quantity: this.quantity,
        storeId,
        storeItemId: this.productId // 上一个页面出过来的值
      }
      const { code } = await _addCatcartCreate(params)
      console.log(code)
      if (code === 200) {
        console.log('加购物', '----')
        _validate.openTip(this, '加入购物车成功', 'success')
        this.getcartNumFn()
      }
    },
    // 购物车数量
    async getcartNumFn() {
      const params = {
        memberUserId: '145'
      }
      const { result } = await _addCatcartTotal(params)
      if (_validate.checkEmpty(result)) {
        _validate.openTip(this, '获取超时，请稍后重试', 'warning')
      } else {
        console.log('加购物数量更新', '----')
        this.$store.commit('SET_CARTNUM', result.data)
      }
    },
    // 数量加
    addNum() {
      this.quantity += 1
      if (this.quantity >= this.productData.itemStock) {
        this.quantity = this.productData.itemStock
        _validate.openTip(this, '已是最大库存', 'warning')
      }
    },
    // 数量减
    reduceNum() {
      let num = this.quantity
      if (num > 1) {
        num -= 1
      }
      this.quantity = num
    },
    // 输入框
    numIptFn() {
      // if(this.value == '0'){this.value = 1}else{this.value = this.value.replace(/[^0-9]/g,'')}
      if (this.quantity == 0) {
        this.quantity = 1
      } else {
        this.quantity = this.quantity.replace(/[^0-9]/g, '')
        if (this.quantity >= this.productData.itemStock) {
          this.quantity = this.productData.itemStock
          _validate.openTip(this, '已是最大库存', 'warning')
        }
      }
    },
    // 立即购买
    goPayFn() {

    }
  }
}
</script>
<style  scoped lang="scss">
.product-box{
    width: 1200px;
    margin: 0 auto;
    .detail-box{
      input[type="text"]:focus {
            outline: none;
          }
      cursor: pointer;
        border-radius: 2px;
        display: flex;
        height: 559px;
        border-radius: 2px;
        background: #FFF;
        .detail_left{
            width: 565px;
            height: 455px;
            .pic{
                width: 565px;
                height: 455px;
            }
            #detail_playPicture {
            position: relative;
            overflow: hidden;
            width: 565px;
            display: none;
            margin-top: 15px;
             a.left-button,a.right-button {
            line-height: 80px;
            position: absolute;
            display: inline-block;
            width: 24px;
            height: 80px;
            top: 0;
            cursor: pointer;
            .triangle-wrap {
            position: absolute;
            width: 12px;
            height: 20px;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            #triangle-left{
                border-top: 10px solid transparent;
                border-right: 12px solid #A5A5A5;
                border-bottom: 10px solid transparent;
            }
            #triangle-left1 {
                top: 0;
                left: 3px;
                position: absolute;
                width: 0;
                border-top: 10px solid transparent;
                border-right: 12px solid #ffffff;
                border-bottom: 10px solid transparent;
            }
            }
            }
           a.right-button{
            right: 3px;
            #triangle-right {
            border-top: 10px solid transparent;
            border-left: 12px solid #A5A5A5;
            border-bottom: 10px solid transparent;
            }
            #triangle-right1{
                top: 0;
                left: -3px;
                position: absolute;
                width: 0;
                border-top: 10px solid transparent;
                border-left: 12px solid #ffffff;
                border-bottom: 10px solid transparent;
            }
            }
            #detail_playPicture_list{
              height: 83px;
            width: 499px;
            margin-left: 28px;
            overflow: hidden;
            background-color: #fff;
            position: relative;
            left: 15px;
            ul{
            width: 10000px;
            height: 83px;
            position: absolute;
            left: 0;
            top: 0;
            -webkit-transition: .5s .2s all ease;
            transition: .5s .2s all ease;
            li{
                float: left;
                height: 83px;
                display: block;
                border: 1px solid #dcdcdc;
                cursor: pointer;
                margin-right: 18px;
                a {
                display: block;
                width: 80px;
                height: 83px;
                img {
                border: 0;
                width: 80px;
                height: 80px;
            }
            }
            }
           li.checked {
          border-color: #e2231a;
        }
            }
            }
            }
        }
        .detail_right{
            padding: 32px 24px 12px 32px;
            .product-name {
            width: 563px;
            color: #333333;
            font-family: "PingFang SC";
            font-size: 20px;
            font-style: normal;
            font-weight: 600;
            line-height: 32px;

        }
        .num-all {
            color: #666666;
            font-family: "PingFang SC";
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
        }
        .price-box {
        margin-bottom: 31px;
        padding: 8px 16px;
        color: #fe4f0f;
        align-self: stretch;
        border-radius: 8px;
        background: #F5F5F5;
        span {
        font-family: "Source Han Sans CN";
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: 43px;
        }
        }
        .adress-box {
        color: #666666;
        font-family: "PingFang SC";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 21.96px;
        display: flex;
        .adress{
        color: #000000e0;
        font-family: "Roboto";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
        }
        .adress-margin{
            margin-left: 40px;
        }
        }
        .transportation-box {
        display: flex;
        width: 299px;
        align-items: center;
        gap: 10px;
        margin: 15px 0 26px 72px;
        color: #666666;
        font-family: "PingFang SC";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        .transportation-type {
        color: #000;
        margin-left: 22px;
        }
        }
        }
        .dd-count-wrap{
            width: 92px;
            border: 1px solid #DADADA;
            display: inline-block;
            line-height: 24px;
            .reduce{
            display: inline-block;
            width: 20px;
            height: 24px;
            line-height: 24px;
            border-right: 1px solid #DADADA;
            text-align: center;
            cursor: pointer;
            .buy-count-plus{
            display: inline-block;
            width: 14px;
            height: 2px;
            background-image: url('') no-repeat;
            vertical-align: middle;

        }
        }
        .txt {
            width: 50px;
            border: none;
            text-align: center;
            vertical-align: middle;
        }
        .add {
        display: inline-block;
        width: 20px;
        height: 24px;
        line-height: 24px;
        border-left: 1px solid #DADADA;
        text-align: center;
        cursor: pointer;
        .buy-count-minus{
        display: inline-block;
        width: 10px;
        height: 10px;
        background-image: url('');
        vertical-align: middle;
        background-repeat: no-repeat;

    }
    }

        }
        .business-staff-container {
        margin: 26px 0 0 0;
        color: #434242;
        .business-title {
        float: left;
        width: 58px;
        line-height: 30px;
        margin-right: 20px;
        margin-left: 20px;
    }

    }
    .add-count-wrap{
        display: flex;
        width: 120px;
        height: 40px;

        border-radius: 8px;

        #reduce_buy_number {
        padding: 0 12px;

        border-radius: 2px 0 0 2px;
        border: 1px solid var(--Neutral-5, #D9D9D9);

        width: 37px;

        line-height: 40px;
    }
        #buy_number {
        text-align: center;
        padding: 4px 12px;

        background: var(--Neutral-1, #FFF);
        box-shadow: 0 -1px 0 0 #D9D9D9 inset, 0 1px 0 0 #D9D9D9 inset, -1px 0 0 0 #D9D9D9 inset;
        width: 55px;

        line-height: 40px;
        border: none;
    }
    #add_buy_number {
        display: flex;
        padding: 0 12px;
        align-items: center;
        align-self: stretch;
        border-radius: 0 2px 2px 0;
        background: var(--Neutral-2, #FAFAFA);
        box-shadow: 0 -1px 0 0 #D9D9D9 inset, 0 1px 0 0 #D9D9D9 inset, -1px 0 0 0 #D9D9D9 inset;
    }

    }
    #div_button_group{
        display: flex;
        .btn{
            padding: 6.4px 15px;
            border-radius: 8px;
            border: 1px solid #FE4F0F;

            box-shadow: 0 2px 0 0 #0000000a;
            text-align: center;
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
            width: 136px;
        }
        .button-add{
        background: #fe4f0f1a;
        color: #fe4f0f;
        height: 41px;

        }
        .button-pay{
        color: #ffffff;
        background: #FE4F0F;

        margin-left: 5px;
        }
    }

  }
  .detail-html {
    background: #fff;
    margin: 24px 0;
.info-title {
    border-bottom: 1px solid #00003b1a;
    background: #FFF;
    height: 64px;
    line-height: 64px;
    display: flex;
    color: #333333;
    font-size: 18px;
}

.dec-tab {
    font-weight: 700;
    margin: 0 24px;
    color: #333333;

}
.bottmcolor{
  border-bottom: 3px solid #1B74E0;
}
.dec-html{
  width: 694px;
  margin:  0 auto;
  margin-top: 16px;
  .dec-count{
    color: #999999;
    .dec-title{
      font-size: 16px;
      margin-bottom: 16px;
      font-weight: 600;
      text-align: center;
    }
    .coutent {

  font-size: 16px;
  color: #333333;
  font-weight: 500;
  margin-bottom: 16px;
  width: 225px;
  text-align: left;
  display: inline-block;
  .dec-txt{
    .txt-color{
    color: #999999;
  }
  }

}
}

.detail-img {
    width: 694px;
    img {
    width: 100%;
}
}
}

.specs-html {

margin-top: 16px;
.table-item {
padding: 12px 0;
line-height: 220%;
color: #999;
font-size: 12px;
border-bottom: 1px solid #eee;
h3 {
font-weight: 400;
width: 110px;
text-align: right;
float: left;
font-size: 12px;

}
dl {
margin-left: 67px;
dt {
width: 160px;
float: left;
text-align: right;
padding-right: 5px;
  }
  dd {
      margin-left: 210px;
  }

}
}

}
}
}
</style>

